<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :title="'查看活动组别'">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :label-width="150">
          <Row>
            <FormItem prop="groupType" label="组别分类">
              <Select v-model="form.data.groupType" style="width: 100%" placeholder="请选择组别分类" disabled>
                <Option
                  v-for="item in groupTypeCodeList"
                  :key="item.code"
                  :value="'' + item.code">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <Col span="11">
              <FormItem prop="group_name" label="组别名称">
                {{form.data.group_name}}
              </FormItem>
              <FormItem prop="low_age" label="年龄要求">
                {{form.data.low_age}}
              </FormItem>
            </Col>
            <Col span="11" offset="2">
              <FormItem prop="total_km" label="公里数（KM）">
                {{form.data.total_km}}
              </FormItem>
              <FormItem prop="high_age" label="至">
                {{form.data.high_age}}
              </FormItem>
            </Col>
          </Row>

          <FormItem prop="age_memo" label="年龄要求说明">
            {{form.data.age_memo}}
          </FormItem>

          <Row>
            <Col span="12">
              <FormItem prop="sign_up_fee" label="报名费">
                {{form.data.sign_up_fee}}
              </FormItem>
            </Col>
            <Col span="11" offset="1">
              <FormItem prop="insurance_fee" label="保险费">
                {{form.data.insurance_fee}}
              </FormItem>
            </Col>
          </Row>

          <FormItem prop="fee_memo" label="报名费说明">
            {{form.data.fee_memo}}
          </FormItem>

          <Row>
            <Col span="12">
              <FormItem prop="start_time" label="发车时间">
                {{form.data.start_time | formatDate('YYYY-MM-DD HH:mm:ss')}}
              </FormItem>
              <FormItem prop="limit_time" label="限时（小时）">
                {{form.data.limit_time}}
              </FormItem>
              <FormItem prop="sign_up_count" label="可报名人数">
                {{form.data.sign_up_count}}
              </FormItem>
            </Col>
            <Col span="11" offset="1">
              <FormItem prop="close_time" label="关门时间">
                {{form.data.close_time | formatDate('YYYY-MM-DD HH:mm:ss')}}
              </FormItem>
              <FormItem prop="acc_points" label="积分">
                {{form.data.acc_points}}
              </FormItem>
              <FormItem prop="if_show" label="是否外网显示">
                {{form.data.if_show ===1 ? '不显示': '显示'}}
              </FormItem>
            </Col>
          </Row>

          <FormItem prop="group_image" label="组别图片">
            <view-img v-if="form.visible" :defaultImageList="defaultImageList"></view-img>
          </FormItem>
          <FormItem prop="remark" label="组别说明">
            {{form.data.remark}}
          </FormItem>
        </Form>
      </Col>
    </Row>

    <div slot="footer">
      <Button @click="closeModal()" type="primary">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import viewImg from '@/components/view-img'

  export default {
    name: 'detail-modal',
    props: [
      'form'
    ],
    components: {
      viewImg
    },
    data () {
      return {
        loading: true
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        groupTypeCodeList: 'groupTypeCodeList'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.form.visible = true
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$nextTick(() => {
            this.$refs.form.resetFields()
          })
        } else {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.group_image || '')
        }
      },
      closeModal () {
        this.form.visible = false
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'group_type')
    }
  }
</script>
